﻿<!DOCTYPE html>
<html>

<head id="Head1" runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>AEOS看板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <link rel="stylesheet" href="../StaticFiles/layui/dist/css/layui.css" />
  <link rel="stylesheet" href="../StaticFiles/layui/admin.css" />
  <link rel="stylesheet" href="../styles/pace.css" />
  <script type="text/javascript" src="../Scripts/pace.min.js"></script>
  <script type="text/javascript" src="../Scripts/json2.js"></script>
  <script type="text/javascript" src="../Scripts/jquery-1.11.2.min.js"></script>
  <style type="text/css">
    html {
      background-image: url(../images/bg.jpg);
    }

    .layui-card {
      background-color: transparent;
      border: 1px dashed #1E9FFF;
    }

    .layui-card-header {
      color: #fff;
      border: none;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 0.1em;
    }

    /*左上图片*/
    .bg-left-top {
      position: absolute;
      left: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-top.png);
    }

    /*左下图片*/
    .bg-left-bottom {
      position: absolute;
      left: -2px;
      bottom: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/left-bottom.png);
    }

    /*右上图片*/
    .bg-right-top {
      position: absolute;
      right: -2px;
      top: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-top.png);
    }

    /*右下图片*/
    .bg-right-bottom {
      position: absolute;
      bottom: -2px;
      right: -2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/right-bottom.png);
    }

    .layui-form-label {
      width: 100px;
      color: #fff;
      text-align: left;
      padding: 4px 10px;
      line-height: 30px;
      font-weight: bold;
    }

    .layui-input {
      height: 38px;
    }

    .target-lable {
      font-size: 20px;
      font-weight: bold;
      line-height: 50px;
      color: #1e9fff;
    }

    .target-value {
      font-size: 22px;
      font-weight: bold;
      line-height: 50px;
      color: #1e9fff;
    }

    .actual-lable {
      font-size: 20px;
      font-weight: bold;
      line-height: 50px;
      color: #00FF00;
    }

    .actual-value {
      font-size: 22px;
      font-weight: bold;
      line-height: 50px;
      color: #00FF00;
    }

    .empty {
      text-align: center;
      color: #fff;
      height: 250px;
      line-height: 250px;
      font-weight: bold;
      font-size: 20px;
    }

    .layui-table-view th {
      font-weight: bold;
      font-size: 16px;
      text-align: center;
      color: #009688;
    }

    .layui-layer-title {
      text-align: center;
      font-weight: bold;
      font-size: 18px !important;
      color: #009688 !important;
    }

    .layui-table-cell {
      text-align: center;
    }
  </style>
</head>

<body>
  <!--[if lt IE 9]>
        <script src="../Scripts/pollyfills/es5-shim.min.js"></script>
        <script src="../Scripts/pollyfills/es5-sham.min.js"></script>
        <script src="../Scripts/pollyfills/html5.js"></script>
        <script src="../Scripts/pollyfills/response.js"></script>
    <![endif]-->
  <form id="form1" action="" class="layui-form">
    <div class="layui-row" style="padding: 10px 15px;">
      <div class="layui-col-md3">
        <div>
          <img src="../images/aeec_logo.png" alt="" height="60" />
        </div>
      </div>
      <div class="layui-col-md6" style="height: 60px; line-height: 60px; text-align: center;
            font-size: 40px; letter-spacing: 0.1em; color: #fff;">
        装配厂AEOS看板
      </div>
      <div class="layui-col-md3" style="height: 60px; line-height: 60px; text-align: right;
            font-size: 16px; font-weight: bold; color: #fff;" id="currentTime">
      </div>
    </div>
    <div class="layui-fluid" style="padding-bottom: 0px;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <img src="../images/安全.png" height="30" alt="" />
              安全指标
            </div>
            <div class="layui-card-body">
              <div id="s-section" style="height: 250px;">
              </div>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-fluid" style="padding-bottom: 0px;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <img src="../images/质量.png" height="30" alt="" />
              质量指标
            </div>
            <div class="layui-card-body">
              <div class="layui-form-item">
                <label class="layui-form-label">
                  指标项筛选：
                </label>
                <div class="layui-input-inline">
                  <select name="ddlQItem" lay-verify="required" lay-search="" id="ddlQItem">
                    <option value="">请选择</option>
                  </select>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" id="btn-Q">
                  <i class="layui-icon">&#xe615;</i>查询
                </button>
              </div>
              <div class="layui-row">
                <div class="layui-col-md6" style="text-align:center;">
                  <img src="../images/目标.png" alt="目标" height="20" style="vertical-align: sub;" />
                  <span class="target-lable">年计划总值：</span>
                  <span class="target-value" id="Q-PlanQty"></span>
                </div>
                <div class="layui-col-md6" style="text-align:center;">
                  <img src="../images/实际.png" alt="实际" height="20" style="vertical-align: sub;" />
                  <span class="actual-lable">年实际总值：</span>
                  <span class="actual-value" id="Q-UseQty"></span>
                </div>
              </div>
              <div id="q-line" style="height:250px;">
              </div>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <img src="../images/成本.png" height="30" alt="" />
              成本指标
            </div>
            <div class="layui-card-body">
              <div class="layui-form-item">
                <label class="layui-form-label">
                  指标项筛选：
                </label>
                <div class="layui-input-inline">
                  <select name="ddlQItem" lay-verify="required" lay-search="" id="ddlCItem">
                    <option value="">请选择</option>
                  </select>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" id="btn-C">
                  <i class="layui-icon">&#xe615;</i>查询
                </button>
              </div>
              <div class="layui-row">
                <div class="layui-col-md6" style="text-align:center;">
                  <img src="../images/目标.png" alt="目标" height="20" style="vertical-align: sub;" />
                  <span class="target-lable">年计划总值：</span>
                  <span class="target-value" id="C-PlanQty"></span>
                </div>
                <div class="layui-col-md6" style="text-align:center;">
                  <img src="../images/实际.png" alt="实际" height="20" style="vertical-align: sub;" />
                  <span class="actual-lable">年实际总值：</span>
                  <span class="actual-value" id="C-UseQty"></span>
                </div>
              </div>
              <div id="c-line" style="height: 250px;">
              </div>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-fluid" style="padding-bottom: 0px;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <img src="../images/交付.png" height="30" alt="" />
              交付指标
            </div>
            <div class="layui-card-body">
              <div class="layui-form-item">
                <label class="layui-form-label">
                  指标项筛选：
                </label>
                <div class="layui-input-inline">
                  <select name="ddlQItem" lay-verify="required" lay-search="" id="ddlDItem">
                    <option value="">请选择</option>
                  </select>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" id="btn-D">
                  <i class="layui-icon">&#xe615;</i>查询
                </button>
              </div>
              <div class="layui-row">
                <div class="layui-col-md6" style="text-align:center;">
                  <img src="../images/目标.png" alt="目标" height="20" style="vertical-align: sub;" />
                  <span class="target-lable">年计划总值：</span>
                  <span class="target-value" id="D-PlanQty"></span>
                </div>
                <div class="layui-col-md6" style="text-align:center;">
                  <img src="../images/实际.png" alt="实际" height="20" style="vertical-align: sub;" />
                  <span class="actual-lable">年实际总值：</span>
                  <span class="actual-value" id="D-UseQty"></span>
                </div>
              </div>
              <div id="d-line" style="height:250px;">
              </div>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">
              <div class="bg-left-top">
              </div>
              <div class="bg-right-top">
              </div>
              <img src="../images/人员.png" height="30" alt="" />
              人员指标
            </div>
            <div class="layui-card-body">
              <div class="layui-form-item">
                <label class="layui-form-label">
                  指标项筛选：
                </label>
                <div class="layui-input-inline">
                  <select name="ddlQItem" lay-verify="required" lay-search="" id="ddlPItem">
                    <option value="">请选择</option>
                  </select>
                </div>
                <button type="button" class="layui-btn layui-btn-normal" id="btn-P">
                  <i class="layui-icon">&#xe615;</i>查询
                </button>
              </div>
              <div class="layui-row">
                <div class="layui-col-md6" style="text-align:center;">
                  <img src="../images/目标.png" alt="目标" height="20" style="vertical-align: sub;" />
                  <span class="target-lable">年计划总值：</span>
                  <span class="target-value" id="P-PlanQty"></span>
                </div>
                <div class="layui-col-md6" style="text-align:center;">
                  <img src="../images/实际.png" alt="实际" height="20" style="vertical-align: sub;" />
                  <span class="actual-lable">年实际总值：</span>
                  <span class="actual-value" id="P-UseQty"></span>
                </div>
              </div>
              <div id="p-line" style="height:250px;">
              </div>
              <div class="bg-left-bottom">
              </div>
              <div class="bg-right-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../Scripts/echarts/echarts-5.4.0.min.js"></script>
    <script type="text/javascript" src="../StaticFiles/layui/dist/layui.js"></script>
    <script type="text/javascript">
      $(function () {
        $(".layui-card:last-child").css({ "marginBottom": "0px" });
        function getUrlParam(name) {
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
          var r = window.location.search.substr(1).match(reg);  //匹配目标参数
          if (r != null) return unescape(r[2]); return null; //返回参数值
        };
        var factoryid = getUrlParam('factoryid');

        // 页面右上方时钟
        function showTime() {
          var currentTime = new Date();
          var year = currentTime.getFullYear();
          var month = currentTime.getMonth() + 1;
          var date = currentTime.getDate();
          var day = currentTime.getDay();
          var hours = currentTime.getHours();
          var minutes = currentTime.getMinutes();
          var seconds = currentTime.getSeconds();
          var time = document.getElementById("currentTime");
          if (seconds < 10) {
            seconds = "0" + seconds;
          }
          if (minutes < 10) {
            minutes = "0" + minutes;
          }
          time.innerHTML = year + "年" + month + "月" + date + "日   " + hours + " : " + minutes + " : " + seconds;
        };
        setInterval(showTime, 500);

        //折线图公用配置
        var chartOption = {
          title: {
            text: '',
            x: 'center',
            backgroundColor: '#008B8B',
            textStyle: {
              color: '#fff',
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'axis',
            show: true,
            axisPointer: {
              type: 'line',
              type: 'shadow'
            }
          },
          legend: {
            data: ["月计划值", "月实际值"],
            x: 'right',
            y: '10px',
            textStyle: {
              fontSize: '14',
              fontWeight: 'bold',
              color: '#fff'
            }
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '4%',
            containLabel: true
          },
          color: ['#00BFFF', '#00FF00'],
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: '2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: '14',
                  fontWeight: 'bold'
                }
                //formatter: function (params) {
                //    return params + "月";
                //}
              },
              data: []
            }
          ],
          yAxis: [
            {
              name: "单位:",
              type: 'value',
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: '2'
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: '14',
                  fontWeight: 'bold'
                }
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#999',
                  type: 'dashed'
                }
              }
            }
          ],
          series: [
            {
              name: '月计划值',
              type: 'line',
              smooth: true,
              symbolSize: 8,
              data: [],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold'
                  }
                }
              },
              lineStyle: {
                width: 3
              }
            },
            {
              name: '月实际值',
              type: 'line',
              smooth: true,
              symbolSize: 8,
              data: [],
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                    position: 'top',
                    fontSize: '12',
                    fontWeight: 'bold'
                  }
                }
              },
              lineStyle: {
                width: 3
              }
            }
          ]
        };

        layui.use(['layer', 'table', 'form'], function () {
          var table = layui.table;
          var layer = layui.layer;
          var form = layui.form;

          //弹出层通用方法
          function openDialog(config) {
            layer.open({
              title: config.title,
              type: 1,
              content: "<table class='layui-hide' id='test'></table>",
              area: ['98%', '98%'],
              skin: 'layui-layer-rim',
              success: function (layero) {
                table.render({
                  elem: '#test',
                  url: config.url,
                  method: config.method,
                  cols: config.cols,
                  where: config.QueryString,
                  request: {
                    pageName: 'page', //页码的参数名称，默认：page
                    limitName: 'rows' //每页数据量的参数名，默认：limit
                  },
                  cellMinWidth: 80,
                  page: {
                    theme: '#1E9FFF'
                  },
                  text: {
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                  }
                });
              }
            });
          };

          //给页面Q、C、D、P四个下拉列表动态绑定值
          function BindDropdownControl() {
            $.ajax({
              type: "POST",
              url: "../handler/board/ZSAEOSLookBoard.ashx",
              dataType: "text",
              cashe: false,
              data: {
                "type": "GetItemValue",
                "factoryid": factoryid,
                "planyear": new Date().getFullYear()
              },
              success: function (result) {
                var json = JSON.parse(result);

                for (var i = 0; i < json.Q.length; i++) {
                  $('#ddlQItem').append("<option value='" + json.Q[i]["ZSCOSTITEMNAME"] + "'>" + json.Q[i]["ZSCOSTITEMNAME"] + "</option>");
                }

                for (var i = 0; i < json.C.length; i++) {
                  $('#ddlCItem').append("<option value='" + json.C[i]["ZSCOSTITEMNAME"] + "'>" + json.C[i]["ZSCOSTITEMNAME"] + "</option>");
                }

                for (var i = 0; i < json.D.length; i++) {
                  $('#ddlDItem').append("<option value='" + json.D[i]["ZSCOSTITEMNAME"] + "'>" + json.D[i]["ZSCOSTITEMNAME"] + "</option>");
                }

                for (var i = 0; i < json.P.length; i++) {
                  $('#ddlPItem').append("<option value='" + json.P[i]["ZSCOSTITEMNAME"] + "'>" + json.P[i]["ZSCOSTITEMNAME"] + "</option>");
                }

                form.render("select");

                //如果下拉列表有值，默认选取第一项的值
                if (json.Q.length > 0) {
                  var select = 'dd[lay-value=' + json.Q[0]["ZSCOSTITEMNAME"] + ']';
                  $('#ddlQItem').siblings("div.layui-form-select").find('dl').find(select).click();
                }

                if (json.C.length > 0) {
                  var select = 'dd[lay-value=' + json.C[0]["ZSCOSTITEMNAME"] + ']';
                  $('#ddlCItem').siblings("div.layui-form-select").find('dl').find(select).click();
                }

                if (json.D.length > 0) {
                  var select = 'dd[lay-value=' + json.D[0]["ZSCOSTITEMNAME"] + ']';
                  $('#ddlDItem').siblings("div.layui-form-select").find('dl').find(select).click();
                }

                if (json.P.length > 0) {
                  var select = 'dd[lay-value=' + json.P[0]["ZSCOSTITEMNAME"] + ']';
                  $('#ddlPItem').siblings("div.layui-form-select").find('dl').find(select).click();
                }

                GetQItemData();
                GetCItemData();
                GetDItemData();
                GetPItemData();
              }
            });
          };
          BindDropdownControl();

          //Q指标
          function GetQItemData() {
            $.ajax({
              type: "POST",
              url: "../handler/board/ZSAEOSLookBoard.ashx?itemtype=Q",
              dataType: "text",
              cashe: false,
              data: {
                "type": "GetItemData",
                "factoryid": factoryid,
                "planyear": new Date().getFullYear(),
                "zscostitemname": $('#ddlQItem').val()
              },
              beforeSend: function () {
                echarts.dispose(document.getElementById("q-line"));
                var chart = echarts.init(document.getElementById('q-line'));
                chart.showLoading({
                  text: '数据查询中...',
                  effect: 'whirling',
                  maskColor: 'transparent',
                  textColor: '#ffffff'
                });
              },
              success: function (result) {
                var json = JSON.parse(result);

                echarts.dispose(document.getElementById("q-line"));
                var chart = echarts.init(document.getElementById('q-line'));
                chart.hideLoading();

                if (json.sumData.length > 0) {
                  $("#Q-PlanQty").text(json.sumData[0]["TOTAL"]);
                  $("#Q-UseQty").text(json.sumData[0]["USEQTYSUM"]);
                } else {
                  $("#Q-PlanQty").text("--");
                  $("#Q-UseQty").text("--");
                }

                if (json.charData.length === 0) {
                  echarts.dispose(document.getElementById("q-line"));
                  $("#q-line").empty().append("<div class='empty'><img src='../images/暂无数据.png' height='40' alt='' /> 未查询出数据</div>");
                  return;
                }

                var arrMonth = [];
                var arrPlanQty = [];
                var arrUseQty = [];

                for (var i = 0; i < json.charData.length; i++) {
                  arrMonth.push(json.charData[i]["USEMONTH"]);
                  arrPlanQty.push(json.charData[i]["PLANQTY"]);
                  arrUseQty.push(json.charData[i]["USEQTY"]);
                };

                var option = chartOption;

                option.title.text = $('#ddlQItem').val() + "--月度趋势图";
                option.yAxis[0].name = "单位:" + json.charData[0]["UOMNAME"]; //单位
                option.xAxis[0].data = arrMonth; //折线图标题
                option.series[0].data = arrPlanQty; //计划值
                option.series[1].data = arrUseQty; //实际值

                chart.on('click', function (params) {
                  var config = {};
                  config.url = "../handler/board/ZSAEOSLookBoard.ashx";
                  config.QueryString = {
                    type: "GetItemDetails",
                    planyear: new Date().getFullYear(),
                    month: params.name,
                    zscostitemname: $('#ddlQItem').val(),
                    factoryid: factoryid,
                    itemType: "Q"
                  };
                  config.title = "Q指标--" + $('#ddlQItem').val() + "--" + params.name + "--明细信息";
                  config.method = "post";
                  config.cols = [[
                    { type: 'numbers' },
                    { field: 'ZSCOSTITEMNAME', title: '项目名称' },
                    { field: 'USEMONTH', title: '月份' },
                    { field: 'TOTAL', title: '年计划总值（项）' },
                    { field: 'PLANQTY', title: '月计划值（项）' },
                    { field: 'USEQTY', title: '月完成项（消耗值）' },
                    { field: 'NOTES', title: '备注' }
                  ]];
                  openDialog(config);
                });
                chart.setOption(option);
              }
            });
          };

          //C指标
          function GetCItemData() {
            $.ajax({
              type: "POST",
              url: "../handler/board/ZSAEOSLookBoard.ashx?itemtype=C",
              dataType: "text",
              cashe: false,
              data: {
                "type": "GetItemData",
                "factoryid": factoryid,
                "planyear": new Date().getFullYear(),
                "zscostitemname": $('#ddlCItem').val()
              },
              beforeSend: function () {
                echarts.dispose(document.getElementById("c-line"));
                var chart = echarts.init(document.getElementById('c-line'));
                chart.showLoading({
                  text: '数据查询中...',
                  effect: 'whirling',
                  maskColor: 'transparent',
                  textColor: '#ffffff'
                });
              },
              success: function (result) {
                var json = JSON.parse(result);

                echarts.dispose(document.getElementById("c-line"));
                var chart = echarts.init(document.getElementById('c-line'));
                chart.hideLoading();

                if (json.sumData.length > 0) {
                  $("#C-PlanQty").text(json.sumData[0]["TOTAL"]);
                  $("#C-UseQty").text(json.sumData[0]["USEQTYSUM"]);
                } else {
                  $("#C-PlanQty").text("--");
                  $("#C-UseQty").text("--");
                }

                if (json.charData.length === 0) {
                  echarts.dispose(document.getElementById("c-line"));
                  $("#c-line").empty().append("<div class='empty'><img src='../images/暂无数据.png' height='40' alt='' /> 未查询出数据</div>");
                  return;
                }

                var arrMonth = [];
                var arrPlanQty = [];
                var arrUseQty = [];

                for (var i = 0; i < json.charData.length; i++) {
                  arrMonth.push(json.charData[i]["USEMONTH"]);
                  arrPlanQty.push(json.charData[i]["PLANQTY"]);
                  arrUseQty.push(json.charData[i]["USEQTY"]);
                };

                var option = chartOption;

                option.title.text = $('#ddlCItem').val() + "--月度趋势图";
                option.yAxis[0].name = "单位:" + json.charData[0]["UOMNAME"]; //单位
                option.xAxis[0].data = arrMonth; //折线图标题
                option.series[0].data = arrPlanQty; //计划值
                option.series[1].data = arrUseQty; //实际值

                chart.on('click', function (params) {
                  var config = {};
                  config.url = "../handler/board/ZSAEOSLookBoard.ashx";
                  config.QueryString = {
                    type: "GetItemDetails",
                    planyear: new Date().getFullYear(),
                    month: params.name,
                    zscostitemname: $('#ddlCItem').val(),
                    factoryid: factoryid,
                    itemType: "C"
                  };
                  config.title = "C指标--" + $('#ddlCItem').val() + "--" + params.name + "--明细信息";
                  config.method = "post";
                  config.cols = [[
                    { type: 'numbers' },
                    { field: 'ZSCOSTITEMNAME', title: '项目名称' },
                    { field: 'USEMONTH', title: '月份' },
                    { field: 'TOTAL', title: '年计划总值（项）' },
                    { field: 'PLANQTY', title: '月计划值（项）' },
                    { field: 'USEQTY', title: '月完成项（消耗值）' },
                    { field: 'NOTES', title: '备注' }
                  ]];
                  openDialog(config);

                });
                chart.setOption(option);
              }
            });
          };

          //D指标
          function GetDItemData() {
            $.ajax({
              type: "POST",
              url: "../handler/board/ZSAEOSLookBoard.ashx?itemtype=D",
              dataType: "text",
              cashe: false,
              data: {
                "type": "GetItemData",
                "factoryid": factoryid,
                "planyear": new Date().getFullYear(),
                "zscostitemname": $('#ddlDItem').val()
              },
              beforeSend: function () {
                echarts.dispose(document.getElementById("d-line"));
                var chart = echarts.init(document.getElementById('d-line'));
                chart.showLoading({
                  text: '数据查询中...',
                  effect: 'whirling',
                  maskColor: 'transparent',
                  textColor: '#ffffff'
                });
              },
              success: function (result) {
                var json = JSON.parse(result);

                echarts.dispose(document.getElementById("d-line"));
                var chart = echarts.init(document.getElementById('d-line'));
                chart.hideLoading();

                if (json.sumData.length > 0) {
                  $("#D-PlanQty").text(json.sumData[0]["TOTAL"]);
                  $("#D-UseQty").text(json.sumData[0]["USEQTYSUM"]);
                } else {
                  $("#D-PlanQty").text("--");
                  $("#D-UseQty").text("--");
                }

                if (json.charData.length === 0) {
                  echarts.dispose(document.getElementById("d-line"));
                  $("#d-line").empty().append("<div class='empty'><img src='../images/暂无数据.png' height='40' alt='' /> 未查询出数据</div>")
                  return;
                }

                var arrMonth = [];
                var arrPlanQty = [];
                var arrUseQty = [];

                for (var i = 0; i < json.charData.length; i++) {
                  arrMonth.push(json.charData[i]["USEMONTH"]);
                  arrPlanQty.push(json.charData[i]["PLANQTY"]);
                  arrUseQty.push(json.charData[i]["USEQTY"]);
                };

                var option = chartOption;

                option.title.text = $('#ddlDItem').val() + "--月度趋势图";
                option.yAxis[0].name = "单位:" + json.charData[0]["UOMNAME"]; //单位
                option.xAxis[0].data = arrMonth; //折线图标题
                option.series[0].data = arrPlanQty; //计划值
                option.series[1].data = arrUseQty; //实际值

                chart.on('click', function (params) {
                  var config = {};
                  config.url = "../handler/board/ZSAEOSLookBoard.ashx";
                  config.QueryString = {
                    type: "GetItemDetails",
                    planyear: new Date().getFullYear(),
                    month: params.name,
                    zscostitemname: $('#ddlDItem').val(),
                    factoryid: factoryid,
                    itemType: "D"
                  };
                  config.title = "D指标--" + $('#ddlDItem').val() + "--" + params.name + "--明细信息";
                  config.method = "post";
                  config.cols = [[
                    { type: 'numbers' },
                    { field: 'ZSCOSTITEMNAME', title: '项目名称' },
                    { field: 'USEMONTH', title: '月份' },
                    { field: 'TOTAL', title: '年计划总值（项）' },
                    { field: 'PLANQTY', title: '月计划值（项）' },
                    { field: 'USEQTY', title: '月完成项（消耗值）' },
                    { field: 'NOTES', title: '备注' }
                  ]];
                  openDialog(config);
                });
                chart.setOption(option);
              }
            });
          };

          //P指标
          function GetPItemData() {
            $.ajax({
              type: "POST",
              url: "../handler/board/ZSAEOSLookBoard.ashx?itemtype=P",
              dataType: "text",
              cashe: false,
              data: {
                "type": "GetItemData",
                "factoryid": factoryid,
                "planyear": new Date().getFullYear(),
                "zscostitemname": $('#ddlPItem').val()
              },
              beforeSend: function () {
                echarts.dispose(document.getElementById("p-line"));
                var chart = echarts.init(document.getElementById('p-line'));
                chart.showLoading({
                  text: '数据查询中...',
                  effect: 'whirling',
                  maskColor: 'transparent',
                  textColor: '#ffffff'
                });
              },
              success: function (result) {
                var json = JSON.parse(result);

                echarts.dispose(document.getElementById("p-line"));
                var chart = echarts.init(document.getElementById('p-line'));
                chart.hideLoading();

                if (json.sumData.length > 0) {
                  $("#P-PlanQty").text(json.sumData[0]["TOTAL"]);
                  $("#P-UseQty").text(json.sumData[0]["USEQTYSUM"]);
                } else {
                  $("#P-PlanQty").text("--");
                  $("#P-UseQty").text("--");
                }

                if (json.charData.length === 0) {
                  echarts.dispose(document.getElementById("p-line"));
                  $("#p-line").empty().append("<div class='empty'><img src='../images/暂无数据.png' height='40' alt='' /> 未查询出数据</div>");
                  return;
                }

                var arrMonth = [];
                var arrPlanQty = [];
                var arrUseQty = [];

                for (var i = 0; i < json.charData.length; i++) {
                  arrMonth.push(json.charData[i]["USEMONTH"]);
                  arrPlanQty.push(json.charData[i]["PLANQTY"]);
                  arrUseQty.push(json.charData[i]["USEQTY"]);
                };

                var option = chartOption;

                option.title.text = $('#ddlPItem').val() + "--月度趋势图";
                option.yAxis[0].name = "单位:" + json.charData[0]["UOMNAME"]; //单位
                option.xAxis[0].data = arrMonth; //折线图标题
                option.series[0].data = arrPlanQty; //计划值
                option.series[1].data = arrUseQty; //实际值

                chart.on('click', function (params) {
                  var config = {};
                  config.url = "../handler/board/ZSAEOSLookBoard.ashx";
                  config.QueryString = {
                    type: "GetItemDetails",
                    planyear: new Date().getFullYear(),
                    month: params.name,
                    zscostitemname: $('#ddlPItem').val(),
                    factoryid: factoryid,
                    itemType: "P"
                  };
                  config.title = "P指标--" + $('#ddlPItem').val() + "--" + params.name + "--明细信息";
                  config.method = "post";
                  config.cols = [[
                    { type: 'numbers' },
                    { field: 'ZSCOSTITEMNAME', title: '项目名称' },
                    { field: 'USEMONTH', title: '月份' },
                    { field: 'TOTAL', title: '年计划总值（项）' },
                    { field: 'PLANQTY', title: '月计划值（项）' },
                    { field: 'USEQTY', title: '月完成项（消耗值）' },
                    { field: 'NOTES', title: '备注' }
                  ]];
                  openDialog(config);
                });

                chart.setOption(option);
              }
            });
          };

          //Q查询按钮点击事件
          $("#btn-Q").click(function () {
            if ($('#ddlQItem').val() === "") {
              return;
            } else {
              GetQItemData();
            }
          });

          //C查询按钮点击事件
          $("#btn-C").click(function () {
            if ($('#ddlCItem').val() === "") {
              return;
            } else {
              GetCItemData();
            }
          });

          //D查询按钮点击事件
          $("#btn-D").click(function () {
            if ($('#ddlDItem').val() === "") {
              return;
            } else {
              GetDItemData();
            }
          });

          //P查询按钮点击事件
          $("#btn-P").click(function () {
            if ($('#ddlPItem').val() === "") {
              return;
            } else {
              GetPItemData();
            }
          });

          //S指标
          function GetSafeData() {
            $.ajax({
              type: "GET",
              url: "../handler/board/ZSAEOSLookBoard.ashx?type=GetSafeBarData",
              dataType: "text",
              cashe: false,
              data: {
                factoryid: factoryid
              },
              beforeSend: function () {
                echarts.dispose(document.getElementById("s-section"));
                var tcdw = echarts.init(document.getElementById('s-section'));
                tcdw.showLoading({
                  text: '数据查询中...',
                  effect: 'whirling',
                  maskColor: 'transparent',
                  textColor: '#ffffff'
                });
              },
              success: function (data) {
                var obj = JSON.parse(data);

                var arrType = [];
                var arrTotal = [];
                var arrFinishedQty = [];

                for (var i = 0; i < obj.length; i++) {
                  arrType.push(obj[i]["type"]);
                  arrTotal.push(obj[i]["total"]);
                  arrFinishedQty.push(obj[i]["finishedQty"]);
                }

                echarts.dispose(document.getElementById("s-section"));
                var chart = echarts.init(document.getElementById('s-section'));
                chart.hideLoading();

                var option = {
                  tooltip: {
                    trigger: 'axis',
                    show: false,
                    axisPointer: {
                      type: 'shadow'
                    }
                  },
                  grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    containLabel: true
                  },
                  legend: {
                    data: ['总数', '已达标/完成数'],
                    x: '10',
                    y: '10',
                    textStyle: {
                      fontSize: '14',
                      fontWeight: 'bold',
                      color: '#fff'
                    }
                  },
                  color: ['#00BFFF', '#32CD32'],
                  xAxis: [
                    {
                      type: 'category',
                      axisTick: {
                        alignWithLabel: true
                      },
                      axisLine: {
                        lineStyle: {
                          color: '#fff',
                          width: '2'
                        }
                      },
                      axisLabel: {
                        show: true,
                        textStyle: {
                          color: '#fff',
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      },
                      data: arrType
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value',
                      axisLine: {
                        lineStyle: {
                          color: '#fff',
                          width: '2'
                        }
                      },
                      axisLabel: {
                        show: true,

                        textStyle: {
                          color: '#fff',
                          fontSize: '14',
                          fontWeight: 'bold'
                        }
                      },
                      splitLine: {
                        show: false,
                        lineStyle: {
                          color: '#999',
                          type: 'dashed'
                        }
                      }
                    }
                  ],
                  series: [
                    {
                      name: '总数',
                      type: 'bar',
                      barMaxWidth: 30,
                      data: arrTotal,
                      itemStyle: {
                        normal: {
                          label: {
                            show: true,
                            position: 'top',
                            fontSize: '14',
                            fontWeight: 'bold'
                          },
                          barBorderRadius: [5, 5, 0, 0]
                        }
                      }
                    },
                    {
                      name: '已达标/完成数',
                      type: 'bar',
                      barMaxWidth: 30,
                      data: arrFinishedQty,
                      itemStyle: {
                        normal: {
                          label: {
                            show: true,
                            position: 'top',
                            fontSize: '14',
                            fontWeight: 'bold'
                          },
                          barBorderRadius: [5, 5, 0, 0]
                        }
                      }
                    }
                  ]
                };
                chart.setOption(option);

                chart.on('click', function (params) {
                  var filter = params.seriesName === "总数" ? "total" : "finishedQty";
                  if (params.name === "S指标任务") {
                    var config = {};
                    config.url = "../handler/board/ZSAEOSLookBoard.ashx";
                    config.QueryString = { type: "GetSafeItemDetails", factoryid: factoryid, filter: filter };
                    config.title = "S（安全）指标--" + params.name + "--" + params.seriesName + "--明细信息";
                    config.method = "post";
                    config.cols = [[
                      { type: 'numbers' },
                      { field: 'OPERATIONCONTENT', title: '任务名称' }, //可编辑单元格
                      {
                        field: 'CREATEDATE', title: '任务时间',
                        templet: function (d) {
                          return d.CREATEDATE.split('T')[0];
                        }
                      },
                      { field: 'LOCALTIME', title: '时间' },
                      { field: 'CYCLE', title: '频次' },
                      { field: 'DEALCOUNT', title: '完成次数' },
                      {
                        field: 'STATUS', title: '状态预警', style: 'color:#fff;',
                        templet: function (d) {
                          if (d.STATUS == '未达标') {
                            return '<span style="background-color: #FF5722;padding:5px;">' + d.STATUS + '</span>'
                          } else {
                            return '<span style="background-color: #5FB878;padding:5px;">' + d.STATUS + '</span>'
                          }
                        }
                      }
                    ]];
                    openDialog(config);
                  };

                  if (params.name === "S指标问题") {
                    var config = {};
                    config.url = "../handler/board/ZSAEOSLookBoard.ashx";
                    config.QueryString = { type: "GetSafeProblemDetails", factoryid: factoryid, filter: filter };
                    config.title = "S（安全）指标--" + params.name + "--" + params.seriesName + "--明细信息";
                    config.method = "post";
                    config.cols = [[
                      { type: 'numbers' },
                      { field: 'DESCRIPTION', title: '问题描述' },
                      { field: 'WORKCENTERNAME', title: '责任单位' },
                      { field: 'FULLNAME', title: '责任人' },
                      {
                        field: 'UFCCHULIDATE', title: '要求完成日期',
                        templet: function (d) {
                          if (d.UFCCHULIDATE === null) {
                            return "";
                          } else {
                            return d.UFCCHULIDATE.split('T')[0];
                          }
                        }
                      },
                      { field: 'CREATEPERSON', title: '提出人' },
                      {
                        field: 'UFCCREATEDATE', title: '提出时间',
                        templet: function (d) {
                          if (d.UFCCREATEDATE === null) {
                            return "";
                          } else {
                            return d.UFCCREATEDATE.split('T')[0];
                          }
                        }
                      },
                      { field: 'UFCRESULT', title: '处理意见' },
                      { field: 'PRIORITY', title: '需求程度' },
                      { field: 'DELAYDAY', title: '超期天数' }
                    ]];
                    openDialog(config);
                  };
                });
              }
            });
          };
          GetSafeData();
        });

      });
    </script>
  </form>
</body>

</html>